import React, { Component } from "react";
import "./ChatInterface.scss";
import {
  Comment,
  Container,
  Divider,
  Header,
  Message
} from "semantic-ui-react";
import justen from "@assert/avator/justen.jpg";
function MessageCard(props) {
  const arrow = {
    position: "absolute",
    top: "2.5em",
    content: "",
    width: 0,
    height: 0,
    borderTop: "1em solid #f8f8f9"
  };
  const left = {
    borderLeft: "1em solid transparent",
    left: "2.5em"
  };
  const right = {
    borderRight: "1em solid transparent",
    right: "2.5em"
  };
  let position = {};
  if (props.left) {
    position = left;
  } else {
    position = right;
  }
  return (
    <div>
      <Comment.Text>
        <Message style={{ boxShadow: "none", display: "block" }} compact>
          {props.value}
        </Message>
      </Comment.Text>
      <div style={{ ...arrow, ...position }} />
    </div>
  );
}
function Author(props) {
  return (
    <div style={{ textAlign: props.left ? "left" : "right" }}>
      <Comment.Author as="a">O'Relly</Comment.Author>
    </div>
  );
}
function CommentContent(props) {
  const layout = {
    marginRight: props.left ? "1em" : "3.5em"
    // maxWidth: "81%"
  };
  return (
    <Comment.Content style={layout}>
      <Author left={props.left} />
      <MessageCard value={props.value} left={props.left} />
    </Comment.Content>
  );
}

function CommentCard(props) {
  const item = props.item;
  const float = {
    float: props.left ? "left" : "right"
  };
  const layout = {
    alignSelf: props.left ? "flex-start" : "flex-end",
    maxWidth: "100%"
  };
  return (
    <Comment style={layout}>
      <Comment.Avatar src={justen} style={{ ...float }} />
      <CommentContent value={item.value} left={item.self} />
    </Comment>
  );
}
function CommentThread(props) {
  const content = props.messages;
  const listItems = content.map((item, index) => {
    return <CommentCard key={index.toString()} item={item} left={item.self} />;
  });
  const layout = {
    display: "flex",
    flexDirection: "column",
    overflowX: "hidden",
    alignItems: "flex-start",
    maxWidth: "100%"
  };
  return (
    <Comment.Group style={layout}>
      <Header
        as="h3"
        dividing
        style={{
          width: "100%",
          height: "2.1rem",
          display: "flex",
          alignItems: "center"
        }}
      >
        Comments
      </Header>
      {listItems}
    </Comment.Group>
  );
}
class ChatInterface extends Component {
  render() {
    const messages = [
      {
        value:
          "今天天气不错21asdfasdfla;sfdja'sdf'asdasdfaoisfdhalsdfa[sdofasdfasdfhasdkjfajsdfihanskdfhakjdsfhkasdhfklahsdfkjasdhlasdfasdfasdfakjsldfajsdfkasdfgasdfaskdfasdf",
        self: true
      },
      {
        value: "上什么班!",
        self: true
      },
      {
        value: "在家里睡觉多舒服",
        self: true
      },
      {
        value:
          "今天天气不错21asdfasdfla;sfdja'sdf'asdasdfaoisfdhalsdfa[sdofasdfasdfhasdkjfajsdfihanskdfhakjdsfhkasdhfklahsdfkjasdhlasdfasdfasdfakjsldfajsdfkasdfgasdfaasdfffffffffffffskdfasdf",
        self: false
      },
      {
        value: "今天天气不错",
        self: false
      }
    ];
    return <CommentThread messages={messages} />;
  }
}

export default ChatInterface;
